<template>
	<view>

		<view class="list-item" style="padding: 0;">
			<u--form class="form" labelAlign="center">

				<u-form-item labelWidth="80" label="手机号" borderBottom>
					<u--input v-model="memberPhone" maxlength="11" type="number" border="none" placeholder="请输入手机号">
					</u--input>
				</u-form-item>
				<u-form-item labelWidth="80" label="验证码" borderBottom>
					<u--input v-model="code" maxlength="8" type="number" border="none" placeholder="请输入验证码">
					</u--input>
					<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>

					<text slot="right" @tap="getCode" :text="tips" class="code-text">{{tips}}</text>

					<!-- <u-button slot="right" size="mini" :text="tips" color="#12B9A3"
					:customStyle="{'color':'#fff'}"
						@tap="getCode"></u-button> -->
				</u-form-item>

				<u-form-item labelWidth="80" label="密码" borderBottom>
					<u--input v-model="psd" maxlength="18" password border="none" placeholder="请输入6位以上的密码">
					</u--input>
				</u-form-item>

				<u-form-item labelWidth="80" label="重复密码">
					<u--input v-model="repsd" maxlength="18" password border="none" placeholder="请重复密码">
					</u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="button" @click="confirm">
			提交
		</view>


	</view>
</template>

<script>
	import {
		verifyCode,
		updatePwd
	} from '@/api/user-api.js';


	export default {
		data() {
			return {
				memberPhone: '',
				code: '',
				tips: '',
				psd: '',
				repsd: '',
				seconds: 60
			}
		},
		methods: {
			//获取验证码
			getCode() {
				if (!uni.$u.test.mobile(this.memberPhone)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号'
					})
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					//发送验证码
					verifyCode({
						phone: this.memberPhone
					}).then(res => {
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			start() {

			},
			end() {

			},
			confirm() {
				if (!uni.$u.test.mobile(this.memberPhone)) {
					uni.$u.toast('请输入正确的手机号');
					return
				}

				if (this.$u.test.isEmpty(this.code)) {
					uni.$u.toast('请输入验证码');
					return
				}

				if (this.$u.test.isEmpty(this.psd)) {
					uni.$u.toast('请输入密码');
					return
				}

				if (this.psd.length < 7) {
					uni.$u.toast('密码须大于6位');
					return
				}

				if (this.psd !== this.repsd) {
					uni.$u.toast('两次输入密码不一致');
					return
				}

				// uni.showLoading({
				// 	title: '提交中'
				// })

				updatePwd({
					phone: this.memberPhone,
					verifyCode: this.code,
					password: this.psd,
					repeatPassword: this.repsd
				}).then(res => {

					// uni.hideLoading()

					uni.showToast({
						icon: 'success',
						title: '修改成功'
					})

					setTimeout(() => {
						uni.navigateBack()
					}, 1000)

				}).catch(e => {
					// uni.hideLoading()
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		margin-top: 40upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		&_img {
			width: 150upx;
			height: 150upx;
		}

		&_title {
			font-size: 30upx;
			color: #666666;
			margin-top: 20upx;
		}
	}

	.aliPayInfo {
		background-color: #ffffff;
		border-radius: 16upx;
		margin: 30upx;
	}

	.form {
		padding: 0 30upx;

	}

	.button {
		background-color: $green12;
		color: #FFFFFF;
		margin: 30upx;
		line-height: 80upx;
		font-size: 36upx;
		text-align: center;
		border-radius: 16upx;
	}

	.code-text {
		display: inline-block;
		color: #fff;
		margin-right: 20upx;
		width: 160upx;
		height: 50upx;
		text-align: center;
		font-size: 24upx;
		line-height: 50upx;
		text-align: center;
		background-color: $green20;
		border-radius: 8upx;
	}
</style>
